<!-- 
树状结构
左侧一颗树，右边是操作（全是按钮）。
选择左边的树，得到设备列表，
右边进行操作。
左右结构
-->
<template>
    <div id="tree">
        <el-container>
            <el-header></el-header>
            <el-container>
                <el-aside width="200px" style="background-color:#eee;">
                    <el-tree style="background-color:#eee;" :data="tree_data" show-checkbox default-expand-all node-key="id" @node-click="tree_node_click" @node-contextmenu="tree_node_contextmenu" @check-change="tree_check_change" @check="tree_check" @current-change="tree_current_change" @node-expand="tree_node_expand" @node-collapse="tree_node_collapse" ref="tree" highlight-current :props="defaultProps">
                    </el-tree>
                </el-aside>
                <el-main>
                    <el-tag type="success" style="max-width:800px;">当前选择了{{roomCnt}}个房间共{{deviceCnt}}个设备。[{{checked_device_ids}}]</el-tag>
                    <batch-setting :device_ids="checked_device_ids"></batch-setting>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import BatchSetting from './batch_setting.vue'
import VueCommon from '../VueCommon.js'
export default {
    created() {

    },
    data() {
        let uid = VueCommon.store_getStr('uid')
        let pwd = VueCommon.store_getStr('pwd')
        return {
            tree_data: [],
            uid: uid,
            pwd: pwd,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            roomCnt: 0,
            deviceCnt: 0,
            checked_device_ids: ''
        }
    },
    methods: {
        reload_data() {
            let vm = this
            vm.ajaxPost('/api/room_tree_data', {
                uid: vm.uid,
                pwd: vm.pwd
            }, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        vm.tree_data = response.data.data
                    } else {}
                }
            }, function(error) {
                console.log(error);
            })
        },
        onSubmit() {

        },
        getCheckedNodes() {
            console.log(this.$refs.tree.getCheckedNodes());
        },
        getCheckedKeys() {
            console.log(this.$refs.tree.getCheckedKeys());
        },
        setCheckedNodes() {
            this.$refs.tree.setCheckedNodes([{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 9,
                label: '三级 1-1-1'
            }]);
        },
        setCheckedKeys() {
            this.$refs.tree.setCheckedKeys([3]);
        },
        resetChecked() {
            this.$refs.tree.setCheckedKeys([]);
        },
        tree_change_event() {
            console.log("tree_change_event");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        tree_node_click() {
            console.log("tree_node_click");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        tree_node_contextmenu() {
            console.log("tree_node_contextmenu");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        tree_check_change() {
            console.log("tree_check_change");
        },
        tree_check() {
            console.log("tree_check");
            // console.log(this.$refs.tree.getCheckedNodes());
            let vm = this

            console.log(this.$refs.tree.getCheckedNodes());
            //几个房间，几个设备处理
            let checkedNodes = this.$refs.tree.getCheckedNodes()
            console.log(checkedNodes);
            if (checkedNodes.length == 0) {
                vm.roomCnt = 0
                vm.deviceCnt = 0
                vm.checked_device_ids = ''
            } else {
                let roomCnt = 0
                let deviceStr = ''
                for (var i = 0; i < checkedNodes.length; i++) {
                    var item = checkedNodes[i]
                    if (typeof(item.device_ids) != 'undefined') {
                        roomCnt = roomCnt + 1
                        deviceStr = deviceStr + "," + item.device_ids
                    }
                }
                var arr = deviceStr.split(",");
                //设备号
                arr = vm.unique_arr(arr)
                vm.roomCnt = roomCnt
                vm.deviceCnt = arr.length
                vm.checked_device_ids = arr.join(',');
                console.log(deviceStr, roomCnt)
            }
        },
        tree_current_change() {
            console.log("tree_current_change");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        tree_node_expand() {
            console.log("tree_node_expand");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        tree_node_collapse() {
            console.log("tree_node_collapse");
            // console.log(this.$refs.tree.getCheckedNodes());
        },
        unique_arr(array) {
            var n = []
            for (var i = 0; i < array.length; i++) {
                if (n.indexOf(array[i]) == -1) {
                    if (array[i] != '') {
                        n.push(array[i]);
                    }
                }
            }
            n.sort(function(a, b) {
                return Number(a) - Number(b)
            })
            return n;
        },
    },
    computed: {
        selectedDeviceNote() {
            // console.log("selectedDeviceNote")

            // console.log(this.$refs.tree.getCheckedNodes());

            //获取选中的设备。
            return "当前选中0个设备"
        }
    },
    mounted: function() {
        this.reload_data()
    },
    components: {
        'batch-setting': BatchSetting
    },

}
</script>
